<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Lsc">
    <script src="../jq/jquery-3.1.1.js"></script>
    <title>商品筛选</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .outer {
            width: 770px;
            border: 1px solid gray;
            margin: 0 auto;
        }
        
        .inner {
            border-bottom: 1px dashed #ccc;
            padding: 0 60px;
        }
        
        .inner:nth-of-type(7) {
            border: none;
        }
        
        .inner ul li {
            display: inline-block;
            line-height: 40px;
            font-size: 13px;
        }
        
        .inner ul li span {
            color: royalblue;
            /*border: 1px solid gray;*/
            padding: 2px;
            cursor: pointer;
            user-select: none;
            /*禁止用户选择*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            position: relative;
        }
        
        .inner ul li:nth-of-type(1) {
            font-weight: bold;
        }
        
        .inner:nth-of-type(1) ul {
            position: relative;
        }
        
        .inner:nth-of-type(1) ul li:nth-of-type(1) {
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .inner:nth-of-type(1) ul li:nth-of-type(2) {
            margin-left: 46px;
        }
        
        .clear {
            /*color: orangered;
            background-color: white;*/
            visibility: hidden;
        }
    </style>
</head>

<body>
    <section class="outer">
        <div class="inner">
            <ul>
                <li>品牌：</li>
                <li class="top">
                    <span>苹果</span>
                    <span>小米</span>
                    <span>华为</span>
                    <span>联想</span>
                    <span>中兴</span>
                    <span>三星</span>
                    <span>魅族</span>
                    <span>酷派</span>
                    <span>诺基亚</span>
                    <span>苹果</span>
                    <span>小米</span>
                    <span>华为</span>
                    <span>联想</span>
                    <span>中兴</span>
                    <span>三星</span>
                    <span>魅族</span>
                    <span>酷派</span>
                    <span>诺基亚</span>
                    <span>苹果</span>
                    <span>小米</span>
                    <span>华为</span>
                    <span>联想</span>
                    <span>中兴</span>
                    <span>三星</span>
                    <span>魅族</span>
                    <span>酷派</span>
                    <span>诺基亚</span>
                </li>
            </ul>
        </div>
        <div class="inner">
            <ul>
                <li>价格：</li>
                <li class="top">
                    <span>500元以下</span>
                    <span>500-1000元</span>
                    <span>1000-1500元</span>
                    <span>1500-2000元</span>
                    <span>2000-3000元</span>
                    <span>3000-4000元</span>
                    <span>4000元以上</span>
                </li>
            </ul>
        </div>
        <div class="inner">
            <ul>
                <li>主屏尺寸：</li>
                <li class="top">
                    <span>6.0英寸以上</span>
                    <span>5.5-6.0英寸</span>
                    <span>5.0-5.5英寸</span>
                    <span>4.5-5.0英寸</span>
                    <span>4.0-4.5英寸</span>
                    <span>4.0英寸以下</span>
                </li>
            </ul>
        </div>
        <div class="inner">
            <ul>
                <li>网络：</li>
                <li class="top">
                    <span>全网通</span>
                    <span>双4G</span>
                    <span>移动4G</span>
                    <span>联通4G</span>
                    <span>电信4G</span>
                </li>
            </ul>
        </div>
        <div class="inner">
            <ul>
                <li>核心数：</li>
                <li class="top">
                    <span>十核</span>
                    <span>八核</span>
                    <span>双四核</span>
                    <span>四核</span>
                    <span>双核及以下</span>
                </li>
            </ul>
        </div>
        <div class="inner">
            <ul>
                <li>特性：</li>
                <li class="top">
                    <span>大屏幕</span>
                    <span>双卡双待</span>
                    <span>指纹解锁</span>
                    <span>千元机</span>
                    <span>拍照神器</span>
                </li>
            </ul>
        </div>
        <div class="inner">
            <ul>
                <li>您已选择：</li>
                <li class="bottom_s">
                    <span class="first"></span>
                    <span class="second"></span>
                    <span class="third"></span>
                    <span class="fourth"></span>
                    <span class="fifth"></span>
                    <span class="sixth"></span>
                    <span class="clear">清除筛选条件</span>
                </li>
            </ul>
        </div>
    </section>
</body>

</html>
<script>
    $(function () {
        // 点击筛选条件显示在下方及css样式
        $('.inner .top span').click(function () {
            console.log($(this));
            // 点击文字改变背景颜色及文字颜色，相邻兄弟元素为默认值
            $(this).css({ 'backgroundColor': 'orange', 'color': 'white' })
                .siblings().css({ 'backgroundColor': 'white', 'color': 'royalblue' });

            //  当清除后再次点击将下方7个span显示(全部删除时)
            $('.inner:nth-of-type(7) span').css('visibility', 'visible');

            //  当清除后再次点击将下方7个span显示 (单独删除时)
            $('.bottom_s span').show();

            // 将.clear设置为固定样式
            $('.clear').css({ 'visibility': 'visible', 'color': 'orangered', 'backgroundColor': 'white' });
            
            // 设置下方 筛选条件内容及样式
            $('.bottom_s span')
            .eq($(this).parent().parent().parent().index()).html($(this).html())
            .css('border','1px solid gray');
            
        });

        // 点击清除筛选条件按钮
        $('.clear').click(function () {
            $('.inner:nth-of-type(7) span').css({ 'visibility': 'hidden', 'border': 'none' }).html('');
            $('.clear').html('清除筛选条件');

            $('.inner li span').css({ 'backgroundColor': 'white', 'color': 'royalblue' });
        });
        //  单独删除
        $('.bottom_s span').click(function () {
            console.log($(this));
            //    清除所点击元素的内容 同时设置css样式 
            $(this).hide().html('').css({ 'border': 'none', 'backgroundColor': 'white' });
            $('.clear').html('清除筛选条件');
            // 根据索引 修改.inner下第二个li 对应索引的span的样式
            $('.inner li:nth-of-type(2)').eq($(this).index()).find('span')
            .css({ 'backgroundColor': 'white', 'color': 'royalblue' });
        });

    });

</script>